import React, { Component } from "react";
import { Modal, Tooltip, Form, Table, Row, Col, Spin, Divider, message, Button, Select, Input } from 'antd';
import {  } from "../../../fetch/fetchApi";
import GridTable from '../../../components/display/gridTable';

const {Option} = Select;
const {TextArea} = Input;
const defaultValue = {
    workEfficiency: "0",
    evaluate: "0",
    workEnthusiasm: "0",
    communicate: "0",
    workLevel: "0",
    know: "0",
    cost: "0"
}

function RowStyle(props){
    return (
        <Row>
            <Col span={5} >
                <strong>{props.name}：</strong>
            </Col>
            <Col span={16}>
                {props.type?<TextArea disabled={true} value={props.value}/>:<Input disabled={true} value={props.value}/>}
            </Col>
        </Row>
    );
}

class ReturnVisit extends Component {
    constructor(props) {
        super(props);
        this.init();
        this.state = {
            params: JSON.parse(JSON.stringify(defaultValue))
        }

    }

    init() {
        this.props.handle(defaultValue);
    }

    componentDidMount() {}

    componentWillReceiveProps(nextProps) {
        if (nextProps.isInitValue) {
            this.setState({
                params: JSON.parse(JSON.stringify(defaultValue))
            })
        }
    }

    handleSelectChange = (type, e) => {
        const params = this.state.params;
        params[type] = e;
        this.setState({
            params: params
        })
        this.props.handle(params);
    }

    handleInputChange = (type, e) => {
        if(e.target.value.length>50){
            message.error("输入内容过长（50字以内）！");
            e.preventDefault();
            return;
        }
        const params = this.state.params;
        params[type] = e.target.value;
        this.setState({
            params: params
        })
        this.props.handle(params);
    }

    

    render() {
        return (
            <div className="sc-modal-scroll">
                <div className="modal-list">
                    <div className={"modal-flex"}>
                        <div className={"modal-flex-1"}>
                            <li className={'export-top'}>
                                <RowStyle name="电桩编号" value={this.props.record.stubNo}/>
                            </li>
                            <li className={'export-top'}>
                                <RowStyle name="电桩类型" value={this.props.record.stubType==="0"?"直流":"交流"}/>
                            </li>
                            <li className={'export-top'}>
                                <RowStyle name="详细地址" value={this.props.record.addrDetail}/>
                            </li>
                            <li className={'export-top'}>
                                <RowStyle name="故障代码" value={this.props.record.codeStr}/>
                            </li>
                            <li className={'export-top'}>
                                <RowStyle name="故障描述" value={this.props.record.faultDesc} type="TextArea"/>
                            </li>
                            <li className={'export-top'}>
                                <RowStyle name="报修人" value={this.props.record.userName}/>
                            </li>
                            <li className={'export-top'}>
                                <RowStyle name="联系电话" value={this.props.record.userPhone}/>
                            </li>
                            <li className={'export-top'}>
                                <RowStyle name="报修时间" value={this.props.record.createTime}/>
                            </li>
                            <li className={'export-top'}>
                                <RowStyle name="维修人" value={this.props.record.fixManStr}/>
                            </li>
                            <li className={'export-top'}>
                                <RowStyle name="初步分析" value={this.props.record.fixedDesc} type="TextArea"/>
                            </li>
                            <li className={'export-top'}>
                                <RowStyle name="解决措施" value={this.props.record.improveMethod} type="TextArea"/>
                            </li>
                        </div>
                        <div className={"modal-flex-1"}>
                            <li className={'export-top'}>
                                <Row>
                                    <Col span={5}>
                                        <strong>工作效率：</strong>
                                    </Col>
                                    <Col span={16}>
                                        <Select value={this.state.params.workEfficiency} defaultValue={defaultValue.workEfficiency} onChange={(e) => this.handleSelectChange("workEfficiency", e)}>
                                            <Option value="0">提前完成工作任务</Option>
                                            <Option value="1">按时完成工作任务</Option>
                                            <Option value="2">基本完成任务</Option>
                                        </Select>
                                    </Col>
                                </Row>
                                
                            </li>
                            <li className={'export-top'}>
                                <Row>
                                    <Col span={5}>
                                        <strong>积极性：</strong>
                                    </Col>
                                    <Col span={16}>
                                        <Select value={this.state.params.workEnthusiasm} defaultValue={defaultValue.workEnthusiasm} onChange={(e) => this.handleSelectChange("workEnthusiasm", e)}>
                                            <Option value="0">认真积极</Option>
                                            <Option value="1">需要监督</Option>
                                            <Option value="2">严密监督</Option>
                                        </Select>
                                    </Col>
                                </Row>
                            </li>
                            <li className={'export-top'}>
                                <Row>
                                    <Col span={5}>
                                        <strong>沟通能力：</strong>
                                    </Col>
                                    <Col span={16}>
                                        <Select value={this.state.params.communicate} defaultValue={defaultValue.communicate} onChange={(e) => this.handleSelectChange("communicate", e)}>
                                            <Option value="0">自发沟通协调</Option>
                                            <Option value="1">乐意沟通协调</Option>
                                            <Option value="2">尚能沟通协调</Option>
                                        </Select>
                                    </Col>
                                </Row>
                            </li>
                            <li className={'export-top'}>
                                <Row>
                                    <Col span={5}>
                                        <strong>业务水平：</strong>
                                    </Col>
                                    <Col span={16}>
                                        <Select value={this.state.params.workLevel} defaultValue={defaultValue.workLevel} onChange={(e) => this.handleSelectChange("workLevel", e)}>
                                            <Option value="0">技能业务知识丰富</Option>
                                            <Option value="1">技术业务知识够用</Option>
                                            <Option value="2">技术业务知识不足</Option>
                                        </Select>
                                    </Col>
                                </Row>
                            </li>
                            <li className={'export-top'}>
                                <Row>
                                    <Col span={5}>
                                        <strong>知悉情况：</strong>
                                    </Col>
                                    <Col span={16}>
                                        <Select value={this.state.params.know} defaultValue={defaultValue.know} onChange={(e) => this.handleSelectChange("know", e)}>
                                            <Option value="0">详细维修内容明确</Option>
                                            <Option value="1">大概知道维修内容</Option>
                                            <Option value="2">不清楚维修内容</Option>
                                        </Select>
                                    </Col>
                                </Row>
                            </li>
                            <li className={'export-top'}>
                                <Row>
                                    <Col span={5}>
                                        <strong>费用明细：</strong>
                                    </Col>
                                    <Col span={16}>
                                        <Select value={this.state.params.cost} defaultValue={defaultValue.cost} onChange={(e) => this.handleSelectChange("cost", e)}>
                                            <Option value="0">详细告知费用明细</Option>
                                            <Option value="1">大概知道费用明细</Option>
                                            <Option value="2">不清楚费用明细</Option>
                                        </Select>
                                    </Col>
                                </Row>
                            </li>
                            <li className={'export-top'}>
                                <Row>
                                    <Col span={5}>
                                        <strong>用户意见：</strong>
                                    </Col>
                                    <Col span={16}>
                                        <TextArea value={this.state.params.userOpinion} onChange={(e) => this.handleInputChange("userOpinion", e)} />
                                    </Col>
                                </Row>
                            </li>
                            <li className={'export-top'}>
                                <Row>
                                    <Col span={5}>
                                        <strong>用户评价：</strong>
                                    </Col>
                                    <Col span={16}>
                                        <Select value={this.state.params.evaluate} defaultValue={defaultValue.evaluate} onChange={(e) => this.handleSelectChange("evaluate", e)}>
                                            <Option value="0">好评</Option>
                                            <Option value="1">中评</Option>
                                            <Option value="2">差评</Option>
                                        </Select>
                                    </Col>
                                </Row>
                            </li>
                            <li className={'export-top'}>
                                <Row>
                                    <Col span={5}>
                                        <strong>使用情况：</strong>
                                    </Col>
                                    <Col span={16}>
                                        <TextArea value={this.state.params.evaluateContent} onChange={(e) => this.handleInputChange("evaluateContent", e)} />
                                    </Col>
                                </Row>
                            </li>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
export default ReturnVisit;
